<template>
  <Transition name="up">
    <div class="toasts" v-show="visible">
      {{ text }}
    </div>
  </Transition>
</template>
<script lang="ts" setup>
import { ref, onMounted, toRefs } from "vue";
const props = defineProps({
  text: {
    type: String,
    default: "",
  },
});
const { text } = toRefs(props);
const visible = ref<boolean>(false);
onMounted(() => {
  visible.value = true;
});
</script>
<style scoped lang="scss">
.toasts {
  min-width: 200px;
  height: 48px;
  position: fixed;
  z-index: 99999;
  left: 50%;
  top: 16%;
  background: rgba(17, 17, 17, 0.7);
  box-shadow: 0px 10px 50px 0px;
  color: #fff;
  border-radius: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  transform: translateX(-50%) translateY(-50%);
  line-height: 48px;
  white-space: pre;
}
.up-enter-from {
  opacity: 0;
}
.up-enter-active {
  transition: all 0.5s;
}
.up-enter-to {
  opacity: 1;
}
</style>
